<template>
     <div>
        <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>修改密码</span>
        </div>
        <div class="myBox">
            <el-form ref="form" :model="formData" :rules="formRules" label-width="200px">
                <el-form-item label="原密码" prop="oldpassword">
                    <el-input v-model="formData.oldpassword" class="myInput"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpassword">
                    <el-input v-model="formData.newpassword" class="myInput"></el-input>
                </el-form-item>  
                <el-form-item label="确认密码" prop="confirmNewPassword">
                    <el-input v-model="formData.confirmNewPassword" class="myInput"></el-input>
                </el-form-item> 
            </el-form>
        </div>
<div class="myfooder">
            <el-button @click="confirm">确认</el-button>
            <el-button @click="reset">重置</el-button>
</div>
        </el-card>
    </div>
</template>

<script>
import axios from 'axios'
export default {
     data(){
          return {
                formData: {
                    oldpassword: '',
                    newpassword: '',
                    confirmNewPassword: ''
                },
                formRules: {
                    oldpassword: [
                        {required: true, trigger: 'change', message: '请输入原密码'}
                    ],
                    newpassword: [
                        {required: true, trigger: 'change', message: '请输入新密码'}
                    ],
                    confirmNewPassword: [
                        {required: true, trigger: 'change', message: '请确认新密码'}
                    ]

                }        
          }          
     },
     methods:{
      reset () {
                this.$refs.form.resetFields()
            },
            confirm () {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        console.log('通过校验');
                        if (this.formData.newpassword !== this.formData.confirmNewPassword) {
                            this.$notify.error({
                                title: '确认密码必须一致'
                            })

                            return false
                        }

                        axios({
                            url: "/api/doctor/edpassword",
                            method: 'post',
                            data: {
                                ...this.formData,
                                doctorId:sessionStorage.getItem('doctorId')
                            },
                            headers: {
                                'Token': sessionStorage.getItem('Token')
                            }
                        }).then(res => {
                            console.log(res)
                            if (res.data.error === 0) {
                                this.$notify.success({
                                    title: '修改成功'
                                })
                                sessionStorage.removeItem('Token');
                                sessionStorage.removeItem('doctorName');
                                sessionStorage.removeItem('doctorId');
                                this.$router.replace({
                                    path: '/login'
                                })
                            } else {
                                this.$notify.error({
                                    title: '修改失败'
                                })
                            }
                        })
                    } else {
                        return false
                    }
                })
            }
        }
}
</script>
<style scoped>

.myfooder {
  width: 100%;
  height: 36px;
  text-align: center;

/* .mybtn{
background:rgb(165, 141, 252); 
color:#fff;
width:80px;
height:40px;
font-size:15px

}
.mybtn2{
background:rgb(141, 167, 252); 
color:#fff;
width:80px;
height:40px;
font-size:15px

} */
}
</style>